<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/main/css/main.css}">
    <title>美食分享平台</title>
</head>
<body>
<!-- 顶部导航栏 -->
<div th:replace="common/m_topbar::m_topbar"></div>
<!-- 主要内容 -->
<div class="container">
    <div  class="col-sm-12" style="margin-top: 70px;padding-bottom: 40px">
        <!-- 头像和昵称 -->
        <img class="img-circle" style="width: 100px;height: 100px;display: block;margin-right:20px;margin-left:20px;float: left" th:src="${ur.head}">
        <div style="float: left">
            <p style="font-size: 30px;vertical-align: middle;" th:text="${ur.username}"></p>
            <p th:text="${ur.sex}"></p>
        </div>
        <button style="float: left;margin-left: 400px;width: 86px;height: 34px;font-size: 15px" class="btn btn-default">
            +&nbsp;关注
        </button>
        <!-- 粉丝数关注收藏 -->
        <div style="float: right;width:320px;height:62px;background-color: #F1F7FA;border-radius: 4px;margin-right: 15px">
            <a style="width:79px;height:40px;float: left;border-right: 1px solid gray;margin-top: 10px">
                <p style="text-align: center;font-size: 15px;line-height: 15px">0</p>
                <p style="text-align: center;font-size: 15px">关注</p>
            </a>
            <a style="width:79px;height:40px;float: left;border-right: 1px solid gray;margin-top: 10px">
                <p style="text-align: center;font-size: 15px;line-height: 15px">0</p>
                <p style="text-align: center;font-size: 15px">粉丝</p>
            </a>
            <a style="width:79px;height:40px;float: left;border-right: 1px solid gray;margin-top: 10px">
                <p style="text-align: center;font-size: 15px;line-height: 15px" th:text="${collectNum}"></p>
                <p style="text-align: center;font-size: 15px">收藏</p>
            </a>
            <a style="width:79px;height:40px;float: left;margin-top: 10px">
                <p style="text-align: center;font-size: 15px;line-height: 15px" th:text="${count}"></p>
                <p style="text-align: center;font-size: 15px">发布</p>
            </a>
        </div>
        <!-- 主要内容 -->
        <div class="col-sm-12" style="margin-top: 50px">
            <ul class="breadcrumb">
                <li class="active"><a href="#">概述</a></li>
                <li><a href="#">收藏</a></li>
            </ul>
            <div style="width: 1080px;height: 400px" th:replace="personal/detail::detail">
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div th:replace="common/m_bottom::m_bottom"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>